<template>
  <MyDialog title="设备实时信息" :visible="showDialog" @close="close" @ok="close">
    <el-row v-loading="loading" :gutter="10">
      <el-col v-for="(item, index) in infoList" :key="index" :span="8" class="info">
        <div class="term">
          {{ item.label }}：
        </div>
        <div class="detail">
          <el-tooltip v-if="item.value" class="item" effect="dark" :content="item.value" placement="top">
            <span v-if="item.value">{{ item.value }}</span>
          </el-tooltip>
          <span v-else>--</span>
        </div>
      </el-col>
    </el-row>
    <br />
    <p v-show="result.baseInfo">
      x86信息：
    </p>
    <el-row v-show="result.baseInfo" v-loading="loading" :gutter="10">
      <el-col v-for="(item, index) in x86List" :key="index" :span="8" class="info">
        <div class="term">
          {{ item.label }}：
        </div>
        <div class="detail">
          <el-tooltip v-if="item.value" class="item" effect="dark" :content="item.value" placement="top">
            <span v-if="item.value">{{ item.value }}</span>
          </el-tooltip>
          <span v-else>--</span>
        </div>
      </el-col>
    </el-row>
    <p v-show="result.diskInfo">
      硬盘信息：
    </p>
    <el-row v-show="result.diskInfo" v-loading="loading" :gutter="10">
      <el-col v-for="(item, index) in diskInfo" :key="index" :span="24" class="info">
        <div class="term">
          类型：
        </div>
        <div class="detail">
          <span>{{ item.diskMedia }}</span>
        </div>
        <div class="term">
          容量：
        </div>
        <div class="detail">
          <span>{{ item.diskSize }}</span>
        </div>
        <div class="term">
          名称：
        </div>
        <div class="detail">
          <span>{{ item.name }}</span>
        </div>
      </el-col>
      <el-col v-show="diskInfo.length == 0" :span="24">
        --
      </el-col>
    </el-row>
  </MyDialog>
</template>

<script>
import dialogMixin from "@/mixins/dialogMixin";
import { fetchDeviceRealTimeInfo } from "@/api/deviceManage";
export default {
  mixins: [dialogMixin],
  props: {
    sn: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      loading: false,
      infoList: [
        {
          label: "省份",
          key: "province",
        },
        {
          label: "市",
          key: "city",
        },
        {
          label: "设备名称",
          key: "name",
        },
        {
          label: "设备编号",
          key: "sn",
        },
        {
          label: "在线状态",
          key: "onlineStatus",
        },
        {
          label: "在线状态码",
          key: "onlineCode",
        },
        {
          label: "激活时间",
          key: "activationTime",
        },
        {
          label: "运营商",
          key: "ispName",
        },
        {
          label: "nat类型",
          key: "nat",
        },
        {
          label: "磁盘总空间",
          key: "diskTotal",
        },
        {
          label: "硬盘已使用容量",
          key: "diskUsed",
        },
        {
          label: "CPU使用率",
          key: "cpuUsedRate",
        },
        {
          label: "内存使用率",
          key: "memUsedRate",
        },
        {
          label: "测速宽带",
          key: "upload",
        },
        {
          label: "丢包率",
          key: "pingLoss",
        },
        {
          label: "延迟",
          key: "pingRtt",
        },
        {
          label: "Upnp网关",
          key: "upnpGateway",
        },
        {
          label: "内网ip",
          key: "localIp",
        },
        {
          label: "公网ip",
          key: "publicIp",
        },
      ],
      x86List: [{
        label: "上网方式",
        key: "diallingType"
      }, {
        label: "内网/公网",
        key: "natType"
      }, {
        label: "运营商",
        key: "isp"
      }, {
        label: "线路数量",
        key: "lineNumbers"
      }, {
        label: "DNS",
        key: "dns"
      }, {
        label: "IP协议栈",
        key: "ipProtocol"
      }],
      internetType: [
        { label: "服务器拨号", value: "PPPOE" },
        { label: "服务器拨号一对多", value: "1VN" },
        // { label: "服务器拨号一对一", value: "1V1" },
        { label: "固定公网多IP", value: "PUBLIC_MULTI_IP" },
        { label: "固定公网单IP", value: "PUBLIC_SINGLE_IP" },
        // { label: "固定公网多线路多IP", value: "PUBLIC_MULTI_LINE_SINGLE_IP" },
        // { label: "固定公网单线路多IP", value: "PUBLIC_SINGLE_LINE_MULTI_IP" },
      ],
      diskInfo: [
      ],
      result:{}
    };
  },

  mounted() {
    this.getDeviceInfo();
  },
  methods: {
    getDeviceInfo() {
      this.loading = true;
      let that = this;
      fetchDeviceRealTimeInfo({ sn: this.sn })
        .then((res) => {
          for (let item of this.infoList) {
            this.$set(item, "value", res.data[item.key]);
          }
          for (let item of this.x86List) {
            this.$set(item, "value", res.data.baseInfo[item.key]);
            if (item.key === "diallingType") {
              for (let i = 0; i < that.internetType.length; i++) {
                if (item.value == that.internetType[i].value) {
                  this.$set(item, "value", that.internetType[i].label);
                }
              }
            }
            if (item.key === "natType") {
              this.$set(item, "value", res.data.baseInfo[item.key] == "inner" ? "内网" : "公网");
            }
          }
          this.diskInfo = res.data.diskInfo;
          this.result = res.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.info {
  line-height: 36px;
  font-size: 14px;
  display: flex;
  .detail {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>
